<template>
  <div class="header">
    <!-- 左列 -->
     <span class="logo">商城后台管理系统</span>
     <el-icon class="icon" @click="setIsCollapse">
        <Fold />
     </el-icon>
     <!-- 右列 -->
      <div class="f_right">
        <el-tooltip
            effect="dark"
            content="刷新"
            :enterable="false"
            placement="bottom"
        >
            <el-icon class="icon" @click="refreshHanlde">
                <Refresh />
            </el-icon>
        </el-tooltip>
        <el-tooltip
            v-if="!isFullscreen"
            effect="dark"
            content="全屏"
            :enterable="false"
            placement="bottom"
        >
            <el-icon class="icon">
                <FullScreen @click="toggle" />
            </el-icon>
        </el-tooltip>
        <el-tooltip
            v-else
            effect="dark"
            content="退出全屏"
            :enterable="false"
            placement="bottom"
        >
            <el-icon class="icon">
                <SwitchButton  @click="toggle"/>
            </el-icon>
        </el-tooltip>
        <el-dropdown @command="commandHandle">
            <span>
                <el-avatar :size="30" :src="$store.state.userInfo.avatar" />
                {{ $store.state.userInfo.username}}
                <el-icon class="el-icon--right" style="margin-left: 10px">
                    <ArrowDown />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="editPwd">修改密码</el-dropdown-item>
                    <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
      </div>
      <!-- 修改密码对话框 -->
      <el-dialog
        v-model="dialogEditPwd"
        title="修改密码"
        width="40%"
        @close="closeHandle"
      >
        <el-form
            ref="passwordFormRef"
            style="max-width: 600px"
            :model="passwordForm"
            status-icon
            :rules="passwordRules"
            label-width="auto"
            class="demo-ruleForm"
        >
            <el-form-item label="原密码" prop="oldpassword">
                <el-input v-model="passwordForm.oldpassword" type="password" autocomplete="off" />
            </el-form-item>
            <el-form-item label="新密码" prop="password">
                <el-input v-model="passwordForm.password" type="password" autocomplete="off" />
            </el-form-item>
            <el-form-item label="确认密码" prop="repassword">
            <el-input
                v-model="passwordForm.repassword"
                type="password"
                autocomplete="off"
            />
            </el-form-item>
        </el-form>    
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogEditPwd = false">取消</el-button>
                <el-button type="primary" @click="editPwdHandle">
                确定
                </el-button>
            </div>
        </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { useEditPassword } from '@/utils/useEditPwd'
import { ElMessageBox } from 'element-plus'

import { Fold, Refresh, FullScreen, ArrowDown, SwitchButton } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

const router = useRouter()
const store = useStore()

// 全屏方法
import { useFullscreen } from '@vueuse/core'
const { toggle, isFullscreen } = useFullscreen()

// 解构修改密码属性和方法
const { dialogEditPwd,
        passwordFormRef,
        passwordForm,
        passwordRules,
        closeHandle,
        editPwdHandle } = useEditPassword()

// 页面刷新方法
const refreshHanlde = () => {
    location.reload()
}

// 下拉菜单事件
const commandHandle = (res) => {
    if(res == 'editPwd'){
        // 打开修改密码对话框
        dialogEditPwd.value = true
    }else if(res== 'logout'){
        logout()
    }
}

// 退出登录
const logout = async() => {
    const isLogout = await ElMessageBox.confirm(
        '是否退出登录？',
        '注意',
        {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        }
    ).catch(err => err)
    if(isLogout !== 'confirm'){
        return 
    }
    // 清空本地token
    window.sessionStorage.removeItem('token')
    // 清空Vuex中的用户信息
    store.commit('setUserInfo', {})
    // 跳转到登录页面
    router.push('/login')
}

// 控制菜单的显示和隐藏
const setIsCollapse = () => {
    store.commit('setCollapse')
}


</script>

<style lang="less" scoped>
.header{
    height: 100%;
    display: flex;
    color: #fff;
    align-items: center;

    .f_right{
        margin-left: auto;
        display: flex;
        align-items: center;
        height: 100%;
        padding-right: 20px;

        .el-dropdown{
            margin-left: 20px;
            color: #fff;
            cursor: pointer;

            span{
                display: flex;
                align-items: center;
                .el-avatar{
                    margin-right: 10px;
                }
            }
        }
    }
    .logo{
        font-size: 18px;
        padding-right: 16px;
    }
    .icon{
        width: 30px;
        height: 100%;
        cursor: pointer;
        font-size: 18px;
        font-weight: bold;
    }
    .icon:hover{
        background: #065327;
    }
}
</style>